import QtQuick 2.9
import QtQuick.Controls 2.3


Item{
    id:control

    implicitHeight:48
    implicitWidth:32

    property bool down: false
    property bool isClicked: false
    property bool isHovered: false

    property alias source :pic.source
    property alias text   :desc.text

    signal clicked

    Rectangle{
        id:background
        anchors.fill: parent
        color: "transparent"
    }

    Image{
        id:pic
        anchors.fill: parent
        fillMode: Image.PreserveAspectFit
    }

    MouseArea{
        anchors.fill: parent
        hoverEnabled: true

        onClicked: {
            control.state = isClicked ? "unClicked":  "clicked"
            emit:control.clicked();
        }
        onEntered: {
            control.state = "hovered"
        }
        onExited: {
            if(control.isHovered && (!control.isClicked) ){
                control.state = "normal"
            }
        }
        onPressed: {
            control.state = "pressed"
        }
        onReleased: {
            control.state = "normal"
        }
    }

    Text {
        id: desc
        anchors.centerIn: parent
        color: "white"
    }



    states: [
        State {
            name: "normal"
            PropertyChanges {
                target: control
                isHovered:false
            }
            PropertyChanges {
                target: pic
                scale:1
            }
        },
        State {
            name: "hovered"
            PropertyChanges {
                target: control
                isHovered:true
            }
            PropertyChanges {
                target: pic
                scale:1.4
            }
        },
        State {
            name: "clicked"
            PropertyChanges {
                target: control
                isClicked:true
            }
        },
        State {
            name: "unClicked"
            PropertyChanges {
                target: control
                isClicked:false
            }
        },
        State {
            name: "pressed"
            PropertyChanges {
                target: control
                down:true
            }
            PropertyChanges {
                target: pic
                scale:1.4
            }
        }
    ]

}
